<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="listNotice"
    :columns="columns"
    :row-selection="rowSelection"
    row-key="noticeId"
  >
    <template #toolbars>
      <Space>
        <b-button icon="add" @click="onAdd" code="system:notice:add"
          >新增</b-button
        >
        <b-button
          icon="delete"
          @click="onDelete(null)"
          :disabled="!selectKeys?.length"
          code="system:notice:remove"
          >删除</b-button
        >
      </Space>
    </template>
    <template #operation="{ record }">
      <b-button icon="detail" type="link" @click="() => onView(record)"
        >详情</b-button
      >
      <b-button
        icon="delete"
        type="link"
        @click="() => onDelete(record)"
        code="system:notice:remove"
        >删除</b-button
      >
    </template>
    <template #status="{ column, record }">
      <Tag :color="record.status == '0' ? 'success' : 'error'"
        >{{ record.status == '0' ? '正常' : '关闭' }}
      </Tag>
    </template>
    <template #noticeType="{ column, record }">
      <Tag :color="record.noticeType == '1' ? 'success' : 'warning'"
        >{{ noticeEnum[record.noticeType] }}
      </Tag>
    </template>
  </ProTable>
  <FormModal :items="items">
    <template #noticeContent="{ formState }">
      <MyEditor v-model="formState.noticeContent" />
    </template>
  </FormModal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { hasPermission } from '@/permission';
import { Modal, Space, Tag } from 'ant-design-vue';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import {
  addNotice,
  delNotice,
  exportPost,
  listNotice,
  updateNotice,
} from '@/api/system';
import { systemStore } from '../store';
import MyEditor from './components/editor.vue';

// 引入 css

const { refreshStore, noticeOptions, noticeEnum } = systemStore();
const tableRef = ref();

const init = () => {
  refreshStore.notice();
};

init();

const selectKeys = ref<any[]>([]);
const rowSelection = computed<ProTableProps['rowSelection']>(() => {
  return {
    onChange(values, all) {
      selectKeys.value = all as any[];
    },
  };
});

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'noticeId',
    hideInSearch: true,
  },
  {
    title: '公告标题',
    dataIndex: 'noticeTitle',
  },
  {
    title: '公告类型',
    dataIndex: 'noticeType',
    valueEnum: {
      ...noticeEnum.value,
    },
  },
  {
    title: '操作人员',
    dataIndex: 'createBy',
    hideInTable: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    hideInSearch: true,
    valueEnum: {
      '0': '正常',
      '1': '关闭',
    },
  },
  {
    title: '创建者',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 160,
  },
]);

const items = computed<ProFormProps['items']>(() => [
  {
    label: '公告标题',
    type: 'input',
    field: 'noticeTitle',
    rules: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
    props: {
      placeholder: '请输入公告标题',
    },
  },
  {
    label: '公告类型',
    type: 'select',
    rules: [{ required: true, message: '请输入公告类型', trigger: 'blur' }],
    field: 'noticeType',
    props: {
      placeholder: '请输入公告类型',
      options: noticeOptions.value,
    },
  },
  {
    label: '状态',
    type: 'radio',
    field: 'status',
    rules: [{ required: true, message: '请选择状态', trigger: 'blur' }],
    props: {
      options: [
        { label: '正常', value: '0' },
        { label: '关闭', value: '1' },
      ],
    },
  },
  {
    label: '备注',
    type: 'textarea',
    field: 'noticeContent',
  },
]);

const { FormModal, open } = useFormModal({ size: 'small' });

const onAdd = async () => {
  open({
    title: '新增',
    defaultValue: {},
    serviceApi: async (params: any): Promise<any> => {
      await addNotice(params);
      sleep(() => tableRef.value.refresh());
    },
  });
};

const onView = async (record: any) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '编辑'),
    modalType: 'info',
    defaultValue: {
      ...record,
    },
    hasEditPermission: hasPermission('system:notice:edit'),
    serviceApi: async (params: any): Promise<any> => {
      await updateNotice({
        ...params,
        id: record.id,
      });
      sleep(() => tableRef.value.refresh());
    },
  });
};
const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};

const onDelete = async (record: any) => {
  const ids = record
    ? record.noticeId
    : selectKeys.value.map((item) => item.noticeId).join(',');
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选项？`,
    onOk: async () => {
      await delNotice(ids);
      sleep(() => tableRef.value.refresh());
      selectKeys.value = [];
    },
  });
};
</script>
